<template>
	<view>
		<cu-custom :isBack="true" :alp="alp">
			<block slot="backText">歌单</block>
			<block slot="content"></block>
		</cu-custom>
		<mescroll-uni :down="downOption" @down="downCallback" :up="upOption">
			<view class="rank-detail">
				<view class="bg-img" ref="bgimg">
					<image class="img" :src="bgImg" lazy-load="true" mode="scaleToFill"></image>
					<view class="filter"></view>
					<view class="text">
						<view class="list-title">
							{{ name }}
						</view>
						<view class="play-count">
							<text class="iconfont icon-tubiaozhizuomobanyihuifu-"></text>
									{{ formatPlayCount(playCount) }}
						</view>
					</view>
				</view>
				<view class="list-wraper">
					<view class="sequence-play">
						<text class="iconfont icon-bofang"></text>
						<view class="text">
							播放全部
						</view>
						<view class="count">
							(共{{playList.length}}首)
						</view>
					</view>
					<view class="song-list">
						<view class="item" v-for="(item,index) in playList" :key="index" @tap="goPlay(index)">
							<view class="count">
								{{ index + 1}}
							</view>
							<view class="content">
								<view class="name">
									{{ item.name }}
								</view>
								<view class="desc">
									{{ item.ar[0].name }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import Vue from 'vue'
	import MescrollUni from "../../common/mescroll-uni/mescroll-uni.vue";
	export default {
		components:{
			MescrollUni
		},
		data(){
			return{
				// 下拉刷新的配置
				downOption: { 
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				upOption: {
					use: false
				},
				detailId:'',
				bgImg:'',
				playCount:'',
				playList:[],
				name:'',
				alp:1
			}
		},
		onLoad(option) {//可以接参,但是只加载一次
			this.detailId = option.id
		},
		/* onShow() {//每次显示都加载
			this.getRankDetail()
		},
		onPullDownRefresh() {
		  this.getRankDetail();
		 }, */
		methods:{
			getRankDetail(mescroll){
				if(this.detailId){
					uni.request({
						url:`http://47.100.48.11:4000/playlist/detail?id=${this.detailId}`,
						success:(res)=>{
							if(res.data.code == 200){
								this.name = res.data.playlist.name
								this.bgImg = res.data.playlist.coverImgUrl
								this.playCount = res.data.playlist.playCount
								this.playList = res.data.playlist.tracks
								//成功隐藏下拉加载状态
								setTimeout(()=>{
									mescroll.endSuccess()
								},2000)
							}
						},
						fail: () => {
							// 失败隐藏下拉加载状态
							mescroll.endErr()
						}
					})
				}
			},
			formatPlayCount(count){
				if( count > 10000){
					return Math.floor(count/10000) + '万'
				}
				return count
			},
			downCallback(mescroll){
				this.getRankDetail(mescroll)
			},
			goPlay(index){
				Vue.prototype.PlayInfo = {
					playList:this.playList,
					index:index
				}
				uni.navigateTo({//页面跳转
					url: `/pages/play/index`
				})
			}
		},
		watch:{
			
		}
	}
</script>
<style lang="scss">
	.rank-detail{
		box-sizing: border-box;
		width: 100%;
		background: #f2f3f4;
		.bg-img{
			position: relative;
			width: 100%;
			height: 0;
			padding-top: 75%;
			-webkit-transform-origin: top;
			transform-origin: top;
			background-size: cover;
			background-position: 0 30%;
			box-sizing: border-box;
			.img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.filter{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #000;
				opacity: .2;
			}
			.text{
				position: absolute;
				width: 80%;
				height: 80upx;
				bottom: 100upx;
				left: 40upx;
				color: #fff;
				.list-title{
					position: absolute;
					bottom: 0;
					font-style: italic;
					font-size: 26upx;
					line-height: 26upx;
					font-weight: 700;
					letter-spacing: 3upx;
				}
				.play-count{
					position: absolute;
					top: 90upx;
					line-height: 28upx;
					font-size: 22upx;
					.iconfont{
						font-size: 28upx;
						margin-right: 4upx
					}
				}
			}
		}
		.list-wraper{
			padding: 80upx 0 40upx;
			box-sizing: border-box;
			border-radius: 20upx;
			position: relative;
			top: -40upx;
			background: #f2f3f4;
			height: 100%;
			.sequence-play{
				position: absolute;
				top: 0;
				display: flex;
				align-items: center;
				width: 100%;
				height: 80upx;
				padding-left: 32upx;
				border-bottom: 1px solid #e4e4e4;
				box-sizing: border-box;
				overflow: hidden;
				.iconfont{
					font-size: 40upx;
					color: #2e3030;
					padding-right: 10upx
				}
				.text{
					font-size: 32upx;
					margin-right: 6upx;
				}
				.count{
					font-size: 28upx;
					color: #757575
				}
			}
			.song-list{
				.item{
					position: relative;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					height: 120upx;
					border-bottom: 1px solid #e4e4e4;
					.count{
						flex: 0 0 100upx;
						width: 100upx;
						text-align: center;
						color: #757575;
						font-size: 32upx;
					}
					.content{
						flex: 1;
						line-height: 40upx;
						overflow: hidden;
						font-size: 30upx;
						.name{
							margin-top: 8upx;
							width: 80%;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							color: #2e3030
						}
						.desc{
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							width: 80%;;
							font-size: 24upx;
							color: #757575;
						}
					}
				}
			}
		}
	}
</style>
